<template>
	<view class="homeLayout pageBG">
		<!-- 头部 -->
		<!-- 父组件给子组件传值 -->
		<nav-bar title="推荐"></nav-bar>
		<!-- 轮播图区域 -->
		<view class="banner">
			<swiper :indicator-dots="true" indicator-active-color="#ffffff" :autoplay="true" :circular="true"
				:interval="3000">
				<swiper-item v-for="item in bannerList" :key="item._id">
					<navigator v-if="item.target == 'miniProgram'" :url="item.url" target="miniProgram" :app-id="item.appid" class="link" >
					<image :src="item. picurl" mode="aspectFill"></image>
					</navigator>
					
					<navigator v-else :url="`/pages/classList/classList?${item.url}`" class="link" >
					<image :src="item. picurl" mode="aspectFill"></image>
					</navigator>
				</swiper-item>

			</swiper>
		</view>
		<!-- 公告 -->
		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20"></uni-icons>
				<text>公告</text>
			</view>
			<view class="center">
				<swiper :autoplay="true" :interval="1500" :vertical="true" :circular="true">
					<swiper-item v-for="item in noticeList" :key="item._id">
						<view class="text-wrap">
							{{item.title}}
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="20" color="#333"></uni-icons>
			</view>
		</view>
		<!-- 横向滑动图片区域 -->
		<view class="select">
			<!-- 插槽 -->
			<common-title>
				<template #name>每日推荐</template>
				<template #custom>
					<view class="date">
						<uni-icons type="calendar" size="30" color="#00ff7f"></uni-icons>
						<uni-dateformat :date=Date.now() format='yyyy年'></uni-dateformat>
					</view>
				</template>
			</common-title>
			<!-- 横向滑动 -->
			<scroll-view scroll-x="true">
				<view class="box" @click="goThemePage(item._id)" v-for="item in randomList" :key="item._id">
					<image :src="item.smallPicurl" mode="aspectFill"></image>
				</view>
			</scroll-view>
		</view>
		<!-- 显示更多图片跳转 -->
		<view class="more">
			<common-title>
				<template #name>每日精选</template>
				<template #custom>
					<navigator url="/pages/classify/classify" open-type="reLaunch">More+</navigator>
				</template>
			</common-title>
			<view class="content">
				<!-- 把接口中遍历的item传递给其他组件 -->
				<more-item v-for="item in classifyList" 
				:key="item._id"
				:obj="item"></more-item>
				<more-item :isMore="true"></more-item>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app'
	const bannerList = ref([])
	const randomList = ref([])
	const noticeList = ref([])
	const classifyList = ref([])
	const goThemePage = (id) => {
			uni.setStorageSync('storagClasslist',randomList.value)
		uni.navigateTo({
			url: '/pages/theme/theme?id='+id
		})
	
	}

	const getBanner = async () => {
		const res = await uni.request({
			url: 'https://tea.qingnian8.com/api/bizhi/homeBanner',
			header: {
				"access-key": "238762"
			}
		})
		console.log(res);
		bannerList.value = res.data.data
	}
	const getRandom = async () => {
		const res = await uni.request({
			url: 'https://tea.qingnian8.com/api/bizhi/randomWall',
			header: {
				"access-key": "238762"
			}
		})
		randomList.value = res.data.data
	}
	const getNotice = async () => {
		const res = await uni.request({
			url: "https://tea.qingnian8.com/api/bizhi/wallNewsList",
			header: {
				"access-key": "238762"
			},
			data: {
				select: true
			}
		})
		noticeList.value = res.data.data
	}
	const getClassify = async () => {
			const res = await uni.request({
		 url: "https://tea.qingnian8.com/api/bizhi/classify",
				header: {
					"access-key": "238762"
				},
				data: {
					select: true
				}
		})
	classifyList.value = res.data.data
	}
	
	//分享朋友
	onShareAppMessage(()=>{
	return{
		title:'小方图片',
		path:'/pages/index/index',
	}

	})
	// 分享朋友圈
	// onShareTimeline( ()=>{
	//  return {
	//       title: '小方图片',
	// 	  }
	// })	
	
	getBanner()
	getRandom()
	getNotice()
	getClassify()
</script>

<style lang="scss">
	.banner {
		swiper {
			width: 750rpx;
			height: 340rpx;
			padding: 30rpx;

			swiper-item {
				width: 100%;
				height: 100%;
               .link{
				   width: 100%;
				   height: 100%;
				   image {
				   	width: 100%;
				   	height: 100%;
				   }
			   }
				
			}
		}
	}

	.notice {
		width: 690rpx;
		height: 80rpx;
		background-color: #fffdeb;
		margin: 0 auto;
		border-radius: 80rpx;
		display: flex;
		align-items: center; // 垂直居中


		.left {
			width: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			//ui组件的样式，使用css变量定义，需要使用deep穿透和!important权重最高
			:deep {
				.uni-icons {
					color: $uni-color !important
				}
			}

			text {
				font-size: 28rpx;
				color: #55ff7f;
			}
		}

		.center {
			flex: 1; // 自适应宽度
			overflow: hidden;
			height: 80rpx;

			swiper {
				height: 100%;
			}

			swiper-item {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #000000;

				.text-wrap {
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}

		.right {
			width: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.select {
		padding-top: 70rpx;
		width: 720rpx;
		margin-left: 30rpx;

		.date {
			display: flex;
			align-items: center;

		}

		scroll-view {
			white-space: nowrap;

			.box {
				margin-top: 30rpx;
				display: inline-block;
				width: 190rpx;
				height: 100%;
				margin-right: 15rpx;

				image {
					width: 100%;
					height: 430rpx;
				}
			}

			.box:last-child {
				margin-right: 30rpx;
			}
		}
	}

	.more {
		padding: 30rpx 0;

		.content {
			padding: 0 30rpx;
			margin-top: 30rpx;
			display: grid;
			gap: 15rpx;
			grid-template-columns: repeat(3, 1fr);

		}
	}
</style>